<template>
	<div class="p30">
		<div>
			<div>显示个人完整信息</div>
			{{any}}
		</div>
		<el-button type="primary" @click="changeAge">改变年龄</el-button>
		<div>可以看页面结构，template 根节点 下面有很div啦。</div>
	</div>

	<div style="white-space: pre;">
		<pre>
			<code ref="codeBlock" :class="[language, 'code-block']">
			  {{ code1 }}
			</code>
		</pre>
	</div>

</template>

<script setup>
import { computed, reactive, ref } from 'vue';
	let people = reactive({
		name:'张三',
		age:18,
	})
	let any = computed(()=>{
		return '名字' + people.name + '年龄：' + people.age
	})
	
	const changeAge = ()=>{
		people.age = 200
	}
	const code1 = ref(`
	import { computed, reactive, ref } from 'vue';
	let people = reactive({
		name:'张三',
		age:18,
	})
	let any = computed(()=>{
		return '名字' + people.name + '年龄：' + people.age
	})
	// 如果用ref 定义的数据，那么就得  people.value 来改变值
	const changeAge = ()=>{
		people.age = 200
	}
	`);
	
</script>

<style>
	.code-block {
		display: block;
		padding: 1em;
		background-color: black;
		color: #00FFD1;
		/* 设置代码颜色为蓝绿色，可以根据需要调整颜色值 */
		text-align: left;
		font-size: 18px;
	}
</style>